

<template>
    <div class="region-white crumbBox">
        <div v-if="!hideBack" class="back" @click="$router.back()">
            <i class="el-icon-back"></i>
            <span>返回</span>
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <template v-for="(item, index) in crumbs">
                <el-breadcrumb-item
                    v-if="item.name"
                    :key="index"
                    :to="{ name: item.name }"
                >
                    {{ item.title }}
                </el-breadcrumb-item>
                <el-breadcrumb-item v-else :key="index">
                    {{ item.title }}
                </el-breadcrumb-item>
            </template>
            <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="tips" v-if="tips">{{ tips }}</div>
    </div>
</template>
<script>
/**
 * @description 面包屑组件
 *
 * @description props参数
 * @param {array} list - 面包屑路径，如：[{ title: '菜单名', name: '菜单路由name' }]
 * @param {string} tips - 提示
 * @param {boolean} hideBack - 隐藏返回按钮
 *
 * @example
 * <view-crumb hide-back :list="[{ title: '菜单名', name: '菜单路由name' }]" />
 */
export default {
    name: "view-crumb",
    props: {
        list: {
            type: Array | null,
            default: () => [],
        },
        tips: {
            type: String,
            default: "",
        },
        hideBack: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        crumbs() {
            if (this.list?.length) {
                return this.list;
            }
            let routers = this.$router.getRoutes(),
                routeMate = this.$route.meta,
                parent = [];
            for (const value of routers) {
                // 若当前路由有指向父路由（即有meta.choice字段），展示父路由
                if (routeMate.choice && value.name === routeMate.choice) {
                    parent = [{ title: value.meta.title, name: value.name }];
                    break;
                }
            }
            return parent;
        },
    },
};
</script>
<style lang="less" scoped>
@import url("~@assets/css/public.less");
.crumbBox {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    background-color: #fff;
    overflow: hidden;
    .back {
        color: #878787;
        font-size: 14px;
        line-height: 14px;
        padding-right: 20px;
        cursor: pointer;
        span {
            padding-left: 5px;
        }
    }
    .tips {
        // float: left;
        margin-left: 15px;
        font-size: 12px;
        color: @lightGrey;
    }
}
</style>